<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 员工管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">

                <el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="delAllSelection">批量删除
                </el-button>

                <el-button type="primary" class="handle-del mr10" @click="addEmp">
                    添加员工
                </el-button>

                <el-input v-model="empQuery.name" placeholder="请输入搜索内容" class="handle-input mr10"
                          slot="reference"></el-input>

                <el-select v-model="empQuery.state" placeholder="请选择员工状态" class="handle-input mr10">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-cascader
                        class="handle-input me10"
                        :options="empQuery.deptListName"
                        :props="{multiple: true, checkStrictly: true }"
                        filterable
                        @change="handleChange">
                </el-cascader>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    id="tab"
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    max-height="370"
                    @selection-change="handleSelectionChange">

                <el-table-column type="selection" width="55" align="center" label="selection"></el-table-column>
                <el-table-column prop="empId" label="员工编号" width="80" align="center"></el-table-column>
                <el-table-column prop="name" label="员工名称" width="120" align="center"></el-table-column>
                <el-table-column label="员工职务" align="center" prop="postNames" sortable width="300px"></el-table-column>
                <el-table-column label="头像(查看大图)" prop="photo" align="center">
                    <template slot-scope="scope">
                        <el-avatar>
                            <el-image
                                    class="table-td-thumb"
                                    :src="scope.row.photo"
                                    :preview-src-list="[scope.row.photo]" shape="square"></el-image>
                        </el-avatar>
                    </template>
                </el-table-column>
                <el-table-column label="员工状态" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-show="scope.row.state==0">实习期</el-tag>
                        <el-tag v-show="scope.row.state==1">正式员工</el-tag>
                        <el-tag type="info" v-show="scope.row.state==2">离职</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="entryTime" label="入职时间" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.entryTime }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-tickets"
                                class="blue"
                                @click="handleParticulars(scope.row)"
                        >详情
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        :current-page="query.pageNo"
                        :page-size="query.limit"
                        :total="query.count"
                        :page-sizes="[5,10,15,20,25,30]"
                        @current-change="handlePageChange"
                        @size-change="handleSizeChange"
                        layout="total, sizes, prev, pager, next, jumper"
                ></el-pagination>
            </div>
        </div>

        <!--        详情弹出层-->
        <el-dialog title="详情" :visible.sync="particulars" width="50%">
            <div class="contImg">
                <el-row>
                    <el-col :span="16">
                        <img :src="particularsData.photo" class="png1">
                    </el-col>
                </el-row>
            </div>

            <div class="leftParticulars">
                <el-row class="topCon">
                    <el-col :span="12">
                        <label>员工名称：</label>
                        <el-tag type="success">
                            <span>{{particularsData.name}}</span>
                        </el-tag>
                    </el-col>
                    <el-col :span="12">
                        <label>员工电话：</label>
                        <el-tag type="success">
                            <span>{{particularsData.phone}}</span>
                        </el-tag>
                    </el-col>
                </el-row>

                <el-row class="topCon">
                    <el-col :span="12">
                        <label>身份证号码：</label>
                        <el-tag type="success">
                            <span>{{particularsData.identityCard}}</span>
                        </el-tag>
                    </el-col>
                    <el-col :span="12">
                        <label>员工邮箱：</label>
                        <el-tag type="success">
                            <span>{{particularsData.email}}</span>
                        </el-tag>
                    </el-col>
                </el-row>

                <el-row class="topCon">
                    <el-col :span="12">
                        <label>出生日期：</label>
                        <el-tag type="success">
                            <span>{{particularsData.birthday}}</span>
                        </el-tag>
                    </el-col>
                    <el-col :span="12">
                        <label>婚姻状态：</label>
                        <el-tag type="success">
                            <span v-show="particularsData.marriage==0">未婚</span>
                            <span v-show="particularsData.marriage==1">已婚</span>
                        </el-tag>
                    </el-col>
                </el-row>

                <el-row class="topCon">
                    <el-col :span="12">
                        <label>员工地址：</label>
                        <el-tag type="success">
                            <span>{{particularsData.address}}</span>
                        </el-tag>
                    </el-col>
                    <el-col :span="12">
                        <label>员工状态：</label>
                        <el-tag type="success">
                            <span v-show="particularsData.state==0">实习期</span>
                            <span v-show="particularsData.state==1">正式员工</span>
                        </el-tag>
                    </el-col>
                </el-row>

                <el-row class="topCon">
                    <el-col :span="12">
                        <label>入职时间：</label>
                        <el-tag type="success">
                            <span>{{particularsData.entryTime}}</span>
                        </el-tag>
                    </el-col>
                    <el-col :span="12">
                        <label>员工岗位：</label>
                        <el-tag type="success">
                            <span>{{particularsData.postNames}}</span>
                        </el-tag>
                    </el-col>
                </el-row>

                <el-row class="topCon">
                    <!--                    <el-col :span="12">-->
                    <!--                        <label>员工角色：</label>-->
                    <!--                        <el-tag type="success">-->
                    <!--                            <span>{{particularsData.roleIds}}</span>-->
                    <!--                        </el-tag>-->
                    <!--                    </el-col>-->
                    <el-col :span="12">
                        <el-button @click="resetParticulars">取消</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>

        <!--         编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="50%">
            <el-form v-model="empData" label-width="100px" class="demo-ruleForm">
                <div class="imgDiv">
                    <el-row>
                        <el-col :span="16">
                            <el-form-item prop="photo">
                                <div class="crop-demo">
                                    <img :src="empData.photo" class="png2">
                                    <div class="crop-demo-btn">选择头像
                                        <input class="crop-input" type="file" name="photo" accept="image/*"
                                               @change="setImage"/>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="员工名称">
                            <el-input v-model="empData.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="员工电话">
                            <el-input v-model="empData.phone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证号码">
                            <el-input v-model="empData.identityCard"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="员工邮箱">
                            <el-input v-model="empData.email"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="出生日期">
                            <el-date-picker
                                    v-model="empData.birthday"
                                    align="right"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="婚姻状态">
                            <el-radio-group v-model="empData.marriage">
                                <el-radio :label="0">未婚</el-radio>
                                <el-radio :label="1">已婚</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="员工地址">
                            <el-input v-model="empData.address"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="员工状态">
                            <el-select v-model="empData.state" placeholder="请选择员工状态">
                                <el-option label="实习期" :value="0" :key="0"></el-option>
                                <el-option label="正式员工" :value="1" :key="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="政治面貌">
                            <el-select v-model="empData.poName" placeholder="请选择员工政治面貌" class="handle-input mr10">
                                <el-option
                                        v-for="item in politicalList"
                                        :key="item.poId"
                                        :label="item.poName"
                                        :value="item.poId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="员工学历">
                            <el-select v-model="empData.edName" placeholder="请选择员工政治面貌" class="handle-input mr10">
                                <el-option
                                        v-for="item in edNameList"
                                        :key="item.edId"
                                        :label="item.edName"
                                        :value="item.edId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-row :gutter="24">
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('empData')">修改</el-button>
                            <el-button @click="resetForm">取消</el-button>
                        </el-form-item>
                    </el-row>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {
        empListPage,
        deptList,
        empListById,
        politicalList,
        educationList,
        empAmend,
        uploadImg,
        empDeleteById
    } from '../../api/emp';
    import empAdd from './EmpAdd';

    export default {
        name: 'emp',
        data() {
            return {
                //分页数据
                query: {
                    pageNo: 1, //当前页
                    limit: 5,  //页大小
                    count: 6   //总页数
                },
                //分页条件
                empQuery: {
                    name: '',
                    state: '',
                    deptListName: []
                },
                tableData: [], // 数据显示
                multipleSelection: [],
                delList: [],
                editVisible: false,
                particulars: false,
                pageTotal: 0,
                empData: {},
                particularsData: {},
                idx: -1,
                id: -1,
                options: [{
                    value: '',
                    label: '全部'
                }, {
                    value: '0',
                    label: '实习期'
                }, {
                    value: '1',
                    label: '正式员工'
                }],
                posts: [],
                politicalList: [],
                edNameList: [],
            };
        },
        created() {
            this.getData();
            this.getDeptList();
        },
        methods: {
            //分页方法
            getData(val) {
                empListPage(this.query, this.empQuery).then(res => {
                    let data = res.data;
                    //数据
                    this.tableData = data.data;
                    //总页数
                    this.query.count = data.count;
                });
            },
            // 分页导航
            handlePageChange(val) {
                this.query.pageNo = val;
                this.getData();
            },
            // 分页功能
            handleSizeChange(val) {
                this.query.limit = val;
                this.getData();
            },

            //员工编辑信息
            politicalData() {
                politicalList().then(res => {
                    this.politicalList = res.data;
                });
            },
            educationData() {
                educationList().then(res => {
                    console.log(res.data)
                    this.edNameList = res.data;
                });
            },
            handleChange(val) {
                this.getData(val);
            },
            // 触发搜索按钮
            handleSearch() {
                //重置页码
                this.query.pageNo = 1;
                this.getData();
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除员工' + row.name + '吗？', '提示', {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    empDeleteById(row.empId).then(res => {
                        if (res != null) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.$router.go(0);
                        } else {
                            this.$message({
                                type: 'warning',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            delAllSelection() {
                const length = this.multipleSelection.length;
                let str = '';
                this.delList = this.delList.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error(`删除了${str}`);
                this.multipleSelection = [];
            },
            // 编辑操作
            handleEdit(index, row) {
                this.editVisible = true;
                this.empData = row;
                this.politicalData();
                this.educationData();
            },
            //取消编辑弹出层
            resetForm() {
                this.editVisible = false;
            },
            //取消详情弹出层
            resetParticulars() {
                this.particulars = false;
            },
            // 保存编辑
            submitForm(formName) {
                empAmend(this.empData).then(res => {
                    console.log(res)
                    if (res.data == null) {
                        this.$message({
                            message: '恭喜你，修改成功！',
                            type: 'success',
                        });
                    } else {
                        this.$message({
                            message: '修改数据信息错误！',
                            type: 'warning'
                        });
                    }

                    this.editVisible = false;
                })
            },
            //添加数据
            addEmp() {
                this.$router.push('/empAdd');
            },
            //员工详情
            handleParticulars(row) {
                this.particulars = true;
                this.particularsData = row;
                this.politicalData();
                this.educationData();
                console.log(row)
            },

            //编辑图片上传
            setImage(e) {
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                const reader = new FileReader();
                reader.onload = (event) => {
                    this.dialogVisible = true;
                    this.cropImg = event.target.result;
                    this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
                };
                reader.readAsDataURL(file);
                let formData = new FormData();
                formData.append('image', file);
                uploadImg(formData).then(res => {
                    this.empData.photo = res;
                })
            },
            handleError() {
                this.$notify.error({
                    title: '上传失败',
                    message: '图片上传接口上传失败，可更改为自己的服务器接口'
                });
            }
        },

    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;

    }

    #tab::-webkit-scrollbar {
        width: 6px;
    }

    #tab::-webkit-scrollbar-track {
        background-color: white;
    }

    #tab::-webkit-scrollbar-thumb {
        background-color: #0033FF;
    }

    #tab::-webkit-scrollbar-thumb:active {
        background-color: #0033FF;
    }

    .red {
        color: #ff0000;
    }

    .blue {
        color: blue;
    }

    .mr10 {
        margin-right: 10px;
        width: 140px;
    }

    .me10 {
        margin-right: 10px;
        width: 240px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .tab {
        width: 100%;
    }

    .imgDiv {
        margin-left: 200px;
    }

    .png2 {
        width: 150px;
        height: 120px;
        margin: 0 auto;
        transition: all 0.5s;
    }

    .png2:hover {
        border-radius: 50%;
    }

    .png1 {
        width: 150px;
        height: 120px;
        margin: 0 auto;
        border-radius: 50%;
    }

    .crop-input {
        position: absolute;
        width: 100px;
        height: 40px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }

    .contImg {
        margin-bottom: 30px;
        margin-left: 300px;
    }

    .leftParticulars {
        margin-left: 140px;
    }

    .topCon {
        margin-top: 10px;
    }

    .crop-demo {
        display: flex;
        align-items: flex-end;
    }

    .crop-demo-btn {
        position: relative;
        width: 125px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        margin-left: 30px;
        background-color: #409eff;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        box-sizing: border-box;
    }

</style>
